<script setup lang="ts">
//
import type { GridItem } from '@/types/Grid'
// 定义 props 接收
defineProps<{
    list: GridItem[]
}>()


</script>

<template>


    <!-- 九宫格 -->
    <view class="Grid">
        <view class="Grid-Item" v-for="item in list" :key="item.id">
            <view class="GSimg">
                <!-- <image class="Image" :src="item.img"></image> -->
                <image class="iconfont" :class="item.icon" style="font-size: 45px; color: orangered; height: 45px;">
                </image>
            </view>
            <view class="GStitle">{{ item.name }}</view>
        </view>
        <view class="Grid-Item">
            <view class="GSimg">
                <!-- <image class="Image" :src="item.img"></image> -->
                <image class="iconfont icon-zongyijiemu" style="font-size: 45px; color: orangered;"></image>
            </view>
            <view class="GStitle">其他</view>
        </view>
    </view>
</template>

<style lang="scss">
/*九宫格样式  */

.Grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: center;
    // align-content: space-between;
    background: #f7f7f7;
    padding: 10rpx 0;

    .Grid-Item {
        width: 100%;
        height: 213rpx;
        text-align: center;
        box-sizing: border-box;

        .GSimg {
            text-align: center;
            width: 100%;
            height: 96rpx;
            margin-top: 42rpx;

            Image {
                width: 96rpx;
                height: 96rpx;
            }
        }

    }

}

#moveListContainer {
    border-radius: 5%;
    border: 1rpx solid red;
    padding-left: 30rpx;
    padding-right: 30rpx;

    #moveListHeader {
        display: flex;
        justify-content: space-between;
    }
}
</style>
